
import React, { PureComponent } from 'react';

import { BasicLayout, BasicLayoutSearch } from '../../components/BasicLayout';
import { withRouter } from 'react-router';
import { Row, Col, Form, Select, Layout, Upload, Button, InputNumber, Table, Input, Alert, Spin, Modal, Drawer, Divider, Icon, Badge, PageHeader, Tabs, Card } from 'antd';

const FormItem = Form.Item;
const { Header, Footer, Sider, Content } = Layout;
const { Option } = Select



class SelfCheckingReport extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            queryForm: {},
            path: '',
            searchItem: {}
        }
    }
    componentDidMount() {
        console.log(this.props.location)
        this.setState({
            title: this.props.location?.data?.title ? this.props.location.data.title : JSON.parse(localStorage.getItem('SelfChecking_Report')).title,
            queryForm: this.props.location?.data?.queryForm ? this.props.location.data.queryForm : JSON.parse(localStorage.getItem('SelfChecking_Report')).queryForm,
            path: this.props.location?.data?.path ? this.props.location.data.path : JSON.parse(localStorage.getItem('SelfChecking_Report')).path,
            searchItem: this.props.location?.data?.searchItem ? this.props.location.data.searchItem : JSON.parse(localStorage.getItem('SelfChecking_Report')).searchItem,
        })
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    handlePrint = () => {
        let printReport = document.getElementById('printReport')
        console.log(printReport)
        var flag = false;
        console.log(printReport.offsetHeight)
        if (printReport.offsetHeight === 0) {
            flag = false;
            // return;
        } else {
            flag = true
        }
        if (flag) {
            clearTimeout(times);
            setTimeout(() => {
                var printInnerHTML = printReport.innerHTML;
                window.document.body.innerHTML = printInnerHTML
                window.print();
                window.location.reload();
            });
        } else {
            var times = setTimeout(() => {
                this.print()
            }, 500);
        }
    }

    render() {
        const { form: { getFieldDecorator } } = this.props;

        const { title, queryForm, path, searchItem } = this.state
        console.log(title, queryForm, path, searchItem, '////////////////////////////')
        const dataSource = queryForm?.dataSource || []
        const formData = queryForm?.formData || {}
        const pages = new Array(Math.ceil(dataSource.length / 25)).fill(1)
        console.log(formData, dataSource, pages);
        console.log(formData?.formName);
        return (
            <div>
                <BasicLayoutSearch>
                    <PageHeader
                        style={{ padding: '4px 24px' }}
                        onBack={() => this.props.history.push({ pathname: '/' + path, data: { activeKey: '1', searchItem } })}
                        title={<div>{title ? title : '自检记录表'}</div>}
                        extra={<Button type='primary' icon='printer' onClick={this.handlePrint}>打印</Button>}
                    ></PageHeader>
                </BasicLayoutSearch>
                <Layout className="layout-model">
                    <div id='printReport'>
                        {
                            pages.map((e, i) => {
                                return (<div style={{ width: 900, textAlign: 'left', margin: '0 auto', padding: '0 70px 20px' }} key={i}>
                                    <div style={{ fontSize: 20, fontWeight: 'bold', padding: '40px 0 20px 0', textAlign: 'center' }}>{formData?.fromName}</div>
                                    <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: 5 }}>
                                        <div style={{ flex: 1 }}>机型：{formData?.model}</div>
                                        <div style={{ flex: 1 }}>批号：{formData?.batchNo}</div>
                                        <div style={{ flex: 1 }}>岗位：{formData?.procedureName}</div>
                                    </div>
                                    <table border={1} style={{ margin: '0 auto' }}>
                                        <colgroup>
                                            <col width={50} />
                                            <col width={250} />
                                            <col width={200} />
                                            <col width={200} />
                                            <col width={100} />
                                        </colgroup>
                                        <tbody>
                                            <tr height={40} style={{ textAlign: 'center' }}>
                                                <td>序号</td>
                                                <td>检查项目</td>
                                                <td>检查情况</td>
                                                <td>纠正措施</td>
                                                <td>备注</td>
                                            </tr>
                                            {
                                                dataSource.map((item, index) => {
                                                    return (
                                                        25 * i <= index && index < 25 * (i + 1) ?
                                                            (<tr height={35} key={item.id + '_' + index}>
                                                                <td style={{ textAlign: 'center' }}>{index + 1}</td>
                                                                <td style={{ padding: '0 5px' }}>{item.checkItem}</td>
                                                                <td style={{ padding: '0 5px' }}>{item.checkSituation}</td>
                                                                <td style={{ padding: '0 5px' }}>{item.correctiveAction}</td>
                                                                <td style={{ padding: '0 5px' }}>{item.remarks}</td>
                                                            </tr>)
                                                            : null
                                                    )
                                                })
                                            }
                                        </tbody>
                                    </table>
                                    <div style={{ textAlign: 'right', paddingTop: 5 }}>{formData?.tableCode}</div>
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <div style={{ flex: 1 }}>自检人：{formData?.checkName}</div>
                                        <div style={{ flex: 1 }}>组长确认：{formData?.leaderName}</div>
                                        <div style={{ flex: 1 }}>日期：{formData?.checkTime}</div>
                                    </div>
                                </div>)
                            })
                        }
                    </div>
                </Layout>
            </div>
        );
    }
}
export default Form.create()(withRouter(SelfCheckingReport));